<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel导出示例</title>
    <script src="./js/polyfill.js"></script>
    <script src="./js/exceljs.js"></script>
    <script src="./js/FileSaver.min.js"></script>
    <script src="./js/ExcelExporter.js"></script>
    <script src="js/vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        #app {
            max-width: 800px;
            margin: 0 auto;
        }

        button {
            background-color: #42b983;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #359e75;
        }

        .status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }

        .success {
            background-color: #dff0d8;
            color: #3c763d;
            display: block;
        }

        .error {
            background-color: #f2dede;
            color: #a94442;
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>{{title}}</h1>
        <button @click="exportExcel()">导出Excel</button>
        <div class="status" :class="{success: status === 'success', error: status === 'error'}">
            {{statusMessage}}
        </div>
    </div>

    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                // 表格数据
                tableData: [
                    {
                        planNo: '2025020079',
                        planType: 'ODFPS-500000/750',
                        productionLine: '2',
                        projectName: '宁夏烽燧750kV',
                        materialStatus: '1',
                        "屏蔽线": '1',
                        "电磁线": '2',
                        "条料": '3',

                    },

                    {
                        planNo: '2025020079',
                        planType: 'ODFPS-500000/750',
                        productionLine: '2',
                        projectName: '宁夏烽燧750kV',
                        materialStatus: '2',
                        "屏蔽线": '1',
                        "电磁线": '2',
                        "条料": '3',
                    },
                    {
                        planNo: '2025020079',
                        planType: 'ODFPS-500000/750',
                        productionLine: '2',
                        projectName: '宁夏烽燧750kV',
                        materialStatus: '3',
                        "屏蔽线": '1',
                        "电磁线": '2',
                        "条料": '3',

                    }
                ],
                title: 'Excel多层表头导出演示',
                status: '',
                statusMessage: '',
                tableColumns: [
                    {
                        label: '序号',
                        type: 'index',
                        width: 50,
                        fixed: true,
                        align: 'center',
                        slot: true,
                        prop: 'index',
                    },
                    {
                        label: '工号',
                        prop: 'planNo',
                        width: 150,
                        fixed: true,
                        align: 'center',
                    },
                    {
                        label: '规格型号',
                        prop: 'planType',
                        width: 150,
                        fixed: true,
                        align: 'center'
                    },
                    {
                        label: '产线',
                        prop: 'productionLine',
                        width: 150,
                        fixed: true,
                        align: 'center',
                        slot: true
                    },
                    {
                        label: '项目名称',
                        prop: 'projectName',
                        width: 150,
                        fixed: true,
                        align: 'center'
                    },
                    {
                        label: '物料情况',
                        prop: 'materialStatus',
                        width: 150,
                        fixed: true,
                        align: 'center'
                    },
                    {
                        label: '绕线',
                        align: 'center',
                        children: [
                            {
                                label: '铜线',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '屏蔽线',
                                        prop: '屏蔽线',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '电磁线',
                                        prop: '电磁线',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '饶绝',
                                align: 'center',
                                children: [
                                    {
                                        label: '绕线绝缘',
                                        prop: '绕线绝缘',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: '线圈组装',
                        align: 'center',
                        children: [
                            {
                                label: '光纤',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '线圈组装光纤',
                                        prop: '光纤',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '组绝',
                                align: 'center',
                                children: [
                                    {
                                        label: '组绝绝缘',
                                        prop: '组绝',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: '剪切',
                        align: 'center',
                        children: [
                            {
                                label: '硅钢',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '条料',
                                        prop: '条料',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '母卷',
                                        prop: '母卷',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '成型片',
                                        prop: '成型片',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '成品铁芯',
                                        prop: '成品铁芯',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: '铁芯',
                        align: 'center',
                        children: [
                            {
                                label: '夹件',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '铁芯夹件',
                                        prop: '铁芯夹件',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '夹件磁屏蔽',
                                        prop: '夹件磁屏蔽',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '铁绝',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '铁芯绝缘',
                                        prop: '铁芯绝缘',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '铁芯机加',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '铁芯机加件',
                                        prop: '铁芯机加件',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: '器身',
                        align: 'center',
                        children: [
                            {
                                label: '磁分路大饼',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '铁芯饼',
                                        prop: '铁芯饼',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '磁分路',
                                        prop: '磁分路',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '器绝',
                                align: 'center',
                                children: [
                                    {
                                        label: '器身绝缘',
                                        prop: '器身绝缘',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '器身器绝',
                                        prop: '器身器绝',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: '引线',
                        align: 'center',
                        children: [
                            {
                                label: '均压管A',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '均压管',
                                        prop: '均压管',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '开关',
                                align: 'center',
                                children: [
                                    {
                                        label: '进口开关',
                                        prop: '进口开关',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '国产开关',
                                        prop: '国产开关',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '引线机加',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '引线机加件',
                                        prop: '引线机加件',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '引绝',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '引总绝',
                                        prop: '引总绝',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '出线装置（均压管、球绝缘）',
                                align: 'center',
                                children: [
                                    {
                                        label: '绝缘均压管',
                                        prop: '绝缘均压管',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '均压球',
                                        prop: '均压球',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '出线装置',
                                        prop: '出线装置',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: '总装',
                        align: 'center',
                        children: [
                            {
                                label: '储油柜/胶囊',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '胶囊',
                                        prop: '胶囊',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '储油柜',
                                        prop: '储油柜',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '端子箱A',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '端子箱',
                                        prop: '端子箱',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '密封垫A',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '密封垫',
                                        prop: '密封垫',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '冷却系统',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '散热器',
                                        prop: '散热器',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '冷却器',
                                        prop: '冷却器',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '风机',
                                        prop: '风机',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '阀门A',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '进口阀门',
                                        prop: '进口阀门',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '阀门',
                                        prop: '阀门',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '温控器',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '国产温控器',
                                        prop: '国产温控器',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '进口温控器',
                                        prop: '进口温控器',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '套管',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '国产套管',
                                        prop: '国产套管',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '进口套管',
                                        prop: '进口套管',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '压力释放阀',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '国产压力释放阀',
                                        prop: '国产压力释放阀',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '进口压力释放阀',
                                        prop: '进口压力释放阀',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '气体继电器',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '国产气体继电器',
                                        prop: '国产气体继电器',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '进口气体继电器',
                                        prop: '进口气体继电器',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '油箱A',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '油箱',
                                        prop: '油箱',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '油箱磁屏蔽',
                                        prop: '油箱磁屏蔽',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '油位计',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '进口油位计',
                                        prop: '进口油位计',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '国产油位计',
                                        prop: '国产油位计',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '组件柜/控制柜',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '三项智汇控柜',
                                        prop: '三项智汇控柜',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '智能组件柜',
                                        prop: '智能组件柜',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '风冷控制柜',
                                        prop: '风冷控制柜',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '在线监测A',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '在线监测',
                                        prop: '在线监测',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '速动A',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '速动',
                                        prop: '速动',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '进口速动',
                                        prop: '进口速动',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '吸湿器',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '吸湿器',
                                        prop: '吸湿器',
                                        width: 120,
                                        align: 'center'
                                    },
                                    {
                                        label: '进口吸湿器',
                                        prop: '进口吸湿器',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            },
                            {
                                label: '互感器A',
                                width: 120,
                                align: 'center',
                                children: [
                                    {
                                        label: '互感器',
                                        prop: '互感器',
                                        width: 120,
                                        align: 'center'
                                    }
                                ]
                            }
                        ]
                    }
                ],


            },
            methods: {

                exportExcel() {
                    const exporter = new ExcelExporter({
                        tableColumns: this.tableColumns || [],
                        tableData: this.tableData || [],
                        fileName: '表格.xlsx'
                    });
                    exporter.export()
                },

            }
        });
    </script>
</body>

</html>